<template>
  <div class='interview-container'>
    <el-card class="box-card">
      <!-- 头部搜索框和按钮 -->
      <div class="interview-header">
        <el-form label-position="right" :inline="true" :model="interViewFormData" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="interViewFormData.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="interViewFormData.state" placeholder="请选择">
              <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain>清除</el-button>
            <el-button type="primary" >查询</el-button>
          </el-form-item>
        </el-form>
        <el-button class="addBtn" size="small" icon="el-icon-edit" type="success" >新增技巧</el-button>
      </div>
      <!-- 列表总条数提示信息 -->
      <el-alert
        :title="`面试技巧共 ${total} 篇文章`"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
      <!-- 面试技巧文章列表 -->
       <el-table
        :data="basicsListDate"
        class="questionList"
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="120">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="140">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="100">
          <template slot-scope="scoped">
            <span v-if="scoped.row.questionType === '1'">单选</span>
            <span v-else-if="scoped.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干">
          <template slot-scope="scoped">
            <span v-html="scoped.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="160">
          <template slot-scope="scoped" >
            {{scoped.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="80">
          <template slot-scope="scoped">
            <span v-if="scoped.row.difficulty === '1'">简单</span>
            <span v-else-if="scoped.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="160">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 导入状态固定数据源
import { status } from '@/api/hmmm/constants'
export default {
  name: 'InterView',
  data () {
    return {
      // 状态列表
      stateList: [],
      // 面试文章列表
      interViewData: [],
      // 面试技巧请求数据
      interViewFormData: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
      }
    }
  },
  created () {
    this.getStateList()
  },
  methods: {
    getStateList () {
      this.stateList = status
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 12px;
}
.interview-header {
  display: flex;
  justify-content: space-between;
  .addBtn {
    height: 36px;
  }
}
</style>
